<div class="container login-wrapper" style='{{ui.showbrandimage? "" : "top:30%"}}'>

  <div class="text-center brand-image-container" ng-show="ui.showbrandimage">
    <img class="brand-image" src="{{ui.brandimage}}" width="300">
  </div>

  <p class="login-title" ng-show="ui.logintitle != ''" ng-bind-html="ui.logintitle"></p>

  <p class="login-subtitle" ng-show="ui.loginsubtitle != ''" ng-bind-html="ui.loginsubtitle"></p>

  <form class="login-form" ng-submit="ui.submit()" method="post" autocomplete="off">
      <input autocomplete="anyrandomstring" name="hidden" type="text" style="display:none;">
    <div class="input-group">
      <div class="input-group-addon"><i class="fa fa-user"></i></div>
      <input type="text" class="form-control kuiTextInput" id="opendistro_security.username" name="username" placeholder="Username"
             ng-class="{'has-error': ui.errorMessage}"
             ng-model="ui.credentials.username" required autofocus
             autocomplete="off"/>
    </div>
    <div class="input-group">
      <div class="input-group-addon"><i class="fa fa-lock"></i></div>
      <input type="password" autocomplete="off" class="form-control kuiTextInput" id="opendistro_security.password" name="password" placeholder="Password"
             ng-class="{'has-error': ui.errorMessage}"
             ng-model="ui.credentials.password" required
             autocomplete="off"/>
    </div>

    <button id="opendistro_security.login" type="submit" class="btn btn-default btn-login" ng-attr-style="{{ui.buttonstyle}}">Log in</button>

    <a ng-if="ui.alternativeLogin" ng-href="{{ui.alternativeLogin.url}}" id="opendistro_security.alternative_login" class="btn btn-default btn-login" ng-attr-style="margin-top: 20px; {{ui.alternativeLogin.styles}}" style="">
      {{ui.alternativeLogin.buttonLabel}}
    </a>
  </form>

  <p class="error-message" id="opendistro_security.errormessage" ng-if="ui.errorMessage">{{ ui.errorMessage }}</p>

</div>
